<template>
  <div class="wrapper">
    <el-upload
      ref="uploadEl"
      action
      :auto-upload="false"
      list-type="picture-card"
      :before-remove="beforeRemove"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
    >
      <i class="el-icon-plus" slot="default"></i>
      <template slot="file" slot-scope="{ file }">
        <img
          v-if="isPdf(file.url)"
          class="el-upload-list__item-thumbnail"
          :src="pdfLogo"
          alt=""
        />
        <img
          v-else
          class="el-upload-list__item-thumbnail"
          :src="file.url"
          alt=""
        />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePreview(file)"
          >
            <i class="el-icon-zoom-in"></i>
          </span>
          <span
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download"></i>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </template>
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog> -->
    <!-- <viewer :images="fileList">
        <img v-for="file in fileList" :key="file.name" :src="file.url" />
    </viewer> -->
    <div class="images" v-viewer="{movable: false}" style="display: none">
      <img v-for="src in fileList" :src="src.url" :key="src.name">
    </div>
  </div>
</template>

<script>
import { uploading } from "@/page/material/common/common";
import pdfLogo from "@/assets/img/pdf.png";

export default {
  name: "index",
  components: {},
  props: ["images", "disabled"],
  data() {
    return {
      fileList: [], //上传的文件
      dialogImageUrl: "",
      dialogVisible: false,
      pdfLogo: pdfLogo,
      images1:[]
    };
  },
  mounted() {
    this.fileList = this.images.map((item) => {
      return { url: item };
    });
    const unWatch = this.$watch("images", (newVal, oldVal) => {
      this.fileList =
        this.images &&
        this.images.map((item) => {
          return { url: item };
        });
      unWatch(); // 取消监听
    });
  },
  computed: {},
  watch: {
    images: {
      handler(newV, oldV) {
        // // console.log(newV, oldV, 'vvvvvvvvvv');
      },
    },
  },
  updated() {},
  methods: {
    // 图片上传功能
    handleChange(file, fileList) {
      // this.fileList = fileList;

      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, "tms").then((res) => {
        this.$emit("update:images", [...this.images, res.res.requestUrls[0]]);
        // this.fileList[this.fileList.length-1].url= res.res.requestUrls[0]
        // // console.log([...this.images, res.res.requestUrls[0]],'fffff')
        const images = [...this.images, res.res.requestUrls[0]];
        this.fileList =
          images &&
          images.map((item) => {
            return { url: item };
          });
      });
    },
    isPdf(url) {
      return this.getExt(url) === "pdf";
    },
    getExt(str) {
      return (str.substring(str.lastIndexOf(".") + 1)||"").toLowerCase();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除吗？`);
    },
    handleRemove(file, fileList) {
      // const index = this.ruleForm.images.findIndex(
      //     (item) => item.uid === file.uid
      // );
      // index > -1 && this.ruleForm.images.splice(index, 1);
      const index = this.fileList.findIndex((item) => item.uid === file.uid);
      index > -1 && this.fileList.splice(index, 1);
      const images = this.fileList.map((item) => item.url);
      this.$emit("update:images", [...images]);
    },
    handleDownload(file) {
      const fileName = file.url;
      const elink = document.createElement("a");
      fileName && (elink.download = fileName);
      elink.style.display = "none";
      elink.href = fileName;
      elink.target = "_blank";
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    },
    removeChange(file, fileList, type) {},
    handlePreview(file) {
      const regex = /\.(jpg|png|webp|jpeg)$/i;
      if (this.isPdf(file.url)) {
        this.handleDownload(file);
      }else if (regex.test(file.url)) {
        let index = this.fileList.findIndex(item => item.url === file.url);
        // 找到.images的div挂载到$viewer上
        const viewer = this.$el.querySelector('.images').$viewer;
        // 防止找不到index影响预览
        index = index > -1 ? index : 0;
        viewer.view(index);
      } else {
        window.open(file.url);
      }

    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>